<template>
  <div class="upgradeCarDateDistributionComp">
    <div class="upgradeCarDateDistributionTop">
      <h3 class="withLine title14">
        {{ $t('sjclrqfb') }}
      </h3>
      <div class="upgradeCarDateDistributionTopSearch">
        <a-range-picker
          @change="onRangeChange"
          :defaultValue="dateRangeString"
          :disabled-date="disabledDate"
          style="margin-left: 10px;width:240px;"
        />
      </div>
    </div>
    <div class="upgradeCarDateDistributionMain">
      <loading-state :echartShowStatus="echartShowStatus" class="chartMain">
        <div ref="chartDom" style="height: 100%" v-show="echartShowStatus === 2"></div>
      </loading-state>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { calendarChartOption } from '../config/chart'
import lodash from 'lodash'
import { getEchartNameMap } from '@/utils/functions'
export default {
  components: {
  },
  props: {
    taskId: {
      type: String,
      default: ''
    }
  },
  computed: {

  },
  watch: {
    taskId: {
      handler (val) {
        this.getChartData(val)
      },
      immediate: true
    }
  },
  data () {
    return {
      echartShowStatus: -1,
      chartOption: lodash.cloneDeep(calendarChartOption),
      chart: null,
      dateRangeString: []
    }
  },
  methods: {
    onRangeChange (date, dateString) {
      this.dateRangeString = dateString
    },
    // 时间限制范围 结束时间不能超过今天
    disabledDate (current) {
      return current > moment().endOf('day')
    },
    getChartData () {
      this.echartShowStatus = 1
      const year = 2017
      this.getChartMockData(year).then(res => {
        if (res.data) {
          this.echartShowStatus = 2
          this.chartOption.series.data = res.data
          // 设置语言
          const lang = getEchartNameMap(this.$store.state.app.locale)
          this.chartOption.calendar.dayLabel.nameMap = lang
          this.chartOption.calendar.monthLabel.nameMap = lang
          // 设置年份
          this.chartOption.calendar.range = '2017'
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
        }
      })
    },
    getChartMockData (year) {
      return new Promise((resolve) => {
        const echarts = this.$echarts
        setTimeout(() => {
          // eslint-disable-next-line no-param-reassign
          year = year || '2017'
          const date = +echarts.number.parseDate(year + '-01-01')
          const end = +echarts.number.parseDate(+year + 1 + '-01-01')
          const dayTime = 3600 * 24 * 1000
          const data = []
          for (let time = date; time < end; time += dayTime) {
            data.push([
              echarts.format.formatTime('yyyy-MM-dd', time),
              Math.floor(Math.random() * 10000)
            ])
          }
          console.log(data, 'data111')
          resolve({ data, year })
        }, 1000)
      })
    },
    initChartBox () {
      if (this.chart) {
        return
      }
      this.chart = this.$echarts.init(this.$refs.chartDom)
    },
    setOption () {
      if (!this.chart) {
        return
      }
      this.chart.setOption(this.chartOption)
    },
    bindEvent () {
      window.addEventListener('resize', this.resizeChart)
    },
    resizeChart () {
      this.chart && this.chart.resize()
    }
  },
  beforeDestroy () {
    const vm = this
    if (vm.chart) {
      window.removeEventListener('resize', vm.resizeChart)
    }
  }
}
</script>
<style lang="less" scoped>
.upgradeCarDateDistributionComp {
    margin: 15px 0;
    .upgradeCarDateDistributionTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .upgradeCarDateDistributionMain {
        height: 280px;
    }
}
</style>
